<!--请假管理-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @sort-change="sortChange"
          @current-change="currentChange">
        <template slot="leaveStatus" slot-scope="scope">
          <el-tag v-if="scope.row.leaveStatus === 0" type="primary">审批中</el-tag>
          <el-tag v-else-if="scope.row.leaveStatus === 1" type="success">已通过</el-tag>
          <el-tag v-else-if="scope.row.leaveStatus === 2" type="danger">已驳回</el-tag>
          <el-tag v-else-if="scope.row.leaveStatus === 3" type="info">已撤销</el-tag>
          <el-tag v-else-if="scope.row.leaveStatus === 4" type="info">已销假</el-tag>
          <el-tag v-else type="info">无</el-tag>
        </template>
        <template slot="leaveType" slot-scope="scope">
          <p v-if="scope.row.leaveType === 0">事假</p>
          <p v-else-if="scope.row.leaveType === 1">病假</p>
          <p v-else-if="scope.row.leaveType === 2">晚休</p>
        </template>
        <template slot="buildingName" slot-scope="scope">
          <p v-if="scope.row.buildingName == ''">无</p>
          <p v-else-if="scope.row.buildingName == null">无</p>
          <p v-else>{{scope.row.buildingName}}</p>
        </template>
        <template slot="menu" slot-scope="scope">
          <!--自定义查看按钮-->
          <el-button
              class="filter-item"
              icon="el-icon-view"
              size="mini"
              type="warning"
              @click="handle(scope.row)">查看
          </el-button>
        </template>
      </avue-crud>
      <!--查看弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          title="查看"
          width="40%"
          @close="dictItemVisible"
          :close-on-click-modal="false">
        <el-form>
          <!--第一个框基础信息-->
          <el-form-item style="border-radius: 10px;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;">
            <el-col :span="12">
              <p style="margin: 0">姓名：{{this.name}}</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0" v-if="this.sex === 0">性别：女</p>
              <p style="margin: 0" v-if="this.sex === 1">性别：男</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">年级：{{this.gradeName}}</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">班级：{{this.className}}</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">属性：{{this.identity}}</p>
            </el-col>
            <el-col :span="12">
              <p v-if="this.number == null" style="margin: 0">学号：无</p>
              <p v-else style="margin: 0">学号：{{this.number}}</p>
            </el-col>
          </el-form-item>

          <!--第二个框请假信息-->
          <el-form-item style="border-radius: 10px;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;">
            <el-col :span="12">
              <p v-if="this.leaveStatus === 0" style="margin: 0">当前状态：审批中</p>
              <p v-else-if="this.leaveStatus === 1" style="margin: 0">当前状态：已通过</p>
              <p v-else-if="this.leaveStatus === 2" style="margin: 0">当前状态：已驳回</p>
              <p v-else-if="this.leaveStatus === 3" style="margin: 0">当前状态：已撤销</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">请假发起人：{{this.createUser}}</p>
            </el-col>
            <el-col :span="12">
              <p v-if="this.eye === false" style="margin: 0">发起人电话：{{this.linkPhone}}
                <i class="icon-huabanfuben" style="margin:0 0 0 10px;font-size: 15px!important;" @click="showPhone"/>
              </p>
              <p style="margin: 0" v-else>发起人电话：{{this.linkPhone1}}
                <i class="icon-yanjing1" style="margin:0 0 0 10px;font-size: 15px!important;" @click="showPhone"/>
              </p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">发起时间：{{this.createTime}}</p>
            </el-col>
            <el-col :span="12">
              <p v-if="this.leaveType === 0" style="margin: 0">请假类型：事假</p>
              <p v-else-if="this.leaveType === 1" style="margin: 0">请假类型：病假</p>
              <p v-else-if="this.leaveType === 2" style="margin: 0">请假类型：晚休</p>
            </el-col>
            <el-col :span="12">
              <p style="margin: 0">请假开始时间：{{this.startTime}}</p>
            </el-col>
            <el-col :span="12" v-if="this.leaveType === 1">
              <p style="margin: 0;display: none">请假结束时间：{{this.endTime}}</p>
            </el-col>
            <el-col :span="12" v-else>
              <p style="margin: 0">请假结束时间：{{this.endTime}}</p>
            </el-col>
            <el-col :span="12" v-if="this.leaveType === 1">
              <p style="margin: 0;display: none">请假时长：{{this.durationDay}}天{{this.durationHour}}时</p>
            </el-col>
            <el-col :span="12" v-else>
              <p style="margin: 0">请假时长：{{this.durationDay}}天{{this.durationHour}}时</p>
            </el-col>
            <el-col :span="23">
              <p style="margin: 0">请假理由：{{this.cause}}</p>
            </el-col>
          </el-form-item>

          <!--第三个框审批状态-->
          <!--当请假类型不等于病假时显示-->
          <el-form-item v-if="this.leaveType !== 1">
          <el-form-item style="border-radius: 10px;float:left;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;width: 48%;display: inline-block">
            <el-col :span="24">
              <p style="margin: 0" v-if="this.parentApprove === 0">家长审批结果：待审</p>
              <p style="margin: 0" v-if="this.parentApprove === 1">家长审批结果：通过</p>
              <p style="margin: 0" v-if="this.parentApprove === 2">家长审批结果：驳回</p>
              <p style="margin: 0" v-if="this.parentApprove === 3">家长审批结果：中断</p>
            </el-col>
              <el-col :span="24">
                <p style="margin: 0">家长审批时间：{{this.parentApproveTime}}</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">家长审批反馈：{{this.parentApproveAdvice}}</p>
              </el-col>
          </el-form-item>

            <el-form-item style="border-radius: 10px;float:right;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;width: 48%;display: inline-block">
              <el-col :span="24">
                <p style="margin: 0" v-if="this.teacherApprove === 0">班主任审批结果：待审</p>
                <p style="margin: 0" v-if="this.teacherApprove === 1">班主任审批结果：通过</p>
                <p style="margin: 0" v-if="this.teacherApprove === 2">班主任审批结果：驳回</p>
                <p style="margin: 0" v-if="this.teacherApprove === 3">班主任审批结果：中断</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">班主任审批时间：{{this.teacherApproveTime}}</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">班主任审批反馈：{{this.teacherApproveAdvice}}</p>
              </el-col>
            </el-form-item>

            <!--当请假时长大于等于3天时显示级长审批结果-->
            <el-form-item v-if="this.durationDay >= 3 " style="border-radius: 10px;float:left;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;width: 48%;display: inline-block">
              <el-col :span="24">
                <p style="margin: 0" v-if="this.prefectApprove === 0">级长审批结果：待审</p>
                <p style="margin: 0" v-if="this.prefectApprove === 1">级长审批结果：通过</p>
                <p style="margin: 0" v-if="this.prefectApprove === 2">级长审批结果：驳回</p>
                <p style="margin: 0" v-if="this.prefectApprove === 3">级长审批结果：中断</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">级长审批时间：{{this.prefectApproveTime}}</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">级长审批反馈：{{this.prefectApproveAdvice}}</p>
              </el-col>
            </el-form-item>

            <!--当请假时长大于7天时显示领导审批结果-->
            <el-form-item v-if="this.durationDay > 7" style="border-radius: 10px;float:right;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;width: 48%;display: inline-block">
              <el-col :span="24">
                <p style="margin: 0" v-if="this.leadersApprove === 0">领导审批结果：待审</p>
                <p style="margin: 0" v-if="this.leadersApprove === 1">领导审批结果：通过</p>
                <p style="margin: 0" v-if="this.leadersApprove === 2">领导审批结果：驳回</p>
                <p style="margin: 0" v-if="this.leadersApprove === 3">领导审批结果：中断</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">领导审批时间：{{this.leadersApproveTime}}</p>
              </el-col>
              <el-col :span="24">
                <p style="margin: 0">领导审批反馈：{{this.leadersApproveAdvice}}</p>
              </el-col>
            </el-form-item>
          </el-form-item>

          <!--当请假类型为病假时显示-->
          <el-form-item v-if="this.leaveType === 1" style="border-radius: 10px;padding: 10px 0 10px 30px;box-shadow: 0 0 5px 2px #e5e5e5;">
            <el-col :span="24">
              <p style="margin: 0" v-if="this.doctorApprove === 0">校医审批结果：待审</p>
              <p style="margin: 0" v-if="this.doctorApprove === 1">校医审批结果：通过</p>
              <p style="margin: 0" v-if="this.doctorApprove === 2">校医审批结果：驳回</p>
              <p style="margin: 0" v-if="this.doctorApprove === 3">校医审批结果：中断</p>
            </el-col>
            <!--当校医审批结果为待审时显示-->
            <div v-if="this.doctorApprove === 0">
              <el-col :span="24" style="display: none">
                <p style="margin: 0">校医审批时间：{{this.doctorApproveTime}}</p>
              </el-col>
              <el-col :span="24" style="display: none">
                <p style="margin: 0">校医审批反馈：{{this.doctorApproveAdvice}}</p>
              </el-col>
            </div>
            <!--当校医审批结果为中断时显示-->
            <div v-else-if="this.doctorApprove === 3">
              <el-col :span="24" style="display: none">
                <p style="margin: 0">校医审批时间：{{this.doctorApproveTime}}</p>
              </el-col>
              <el-col :span="24" style="display: none">
                <p style="margin: 0">校医审批反馈：{{this.doctorApproveAdvice}}</p>
              </el-col>
            </div>
            <!--当校医审批结果为其他时显示-->
            <div v-else>
              <el-col :span="24">
                <p style="margin: 0">校医审批时间：{{this.doctorApproveTime}}</p>
              </el-col>
              <el-col :span="23">
                <p style="margin: 0">校医审批反馈：{{this.doctorApproveAdvice}}</p>
              </el-col>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {particularsObj} from '@/api/leave/particulars'
import {mapGetters} from 'vuex'
import {LEAVE_DETAILS, LEAVE_SEX, LEAVE_STATUS, LEAVE_TYPE} from '@/const/Leave'
import {PASS_DETAILS} from "@/const/Dict";

export default {
  name: 'particulars',
  data() {
    return {
      eye:false,
      dialogEditVisible:false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      tableLoading: false,
      name:'',
      sex:'',
      grade:'',
      building:'',
      number:'',
      gradeName:'',
      className:'',
      createUser:'',
      linkPhone:'',  //已打码手机号
      linkPhone1:'', //未打码手机号
      identity:'',
      createTime:'',
      leaveType:'',
      startTime:'',
      endTime:'',
      leaveStatus:'',
      durationDay:'',
      durationHour:'',
      cause:'',
      parentApprove:'',
      parentApproveTime:'',
      parentApproveAdvice:'',
      teacherApprove:'',
      teacherApproveTime:'',
      teacherApproveAdvice:'',
      prefectApprove:'',
      prefectApproveTime:'',
      prefectApproveAdvice:'',
      leadersApprove:'',
      leadersApproveTime:'',
      leadersApproveAdvice:'',
      doctorApprove:'',
      doctorApproveTime:'',
      doctorApproveAdvice:'',
      tableOption:{
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuWidth: 120,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索及清空等操作按钮一栏长度
        delBtn: false,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        menu: true,  //是否显示操作栏
        props: {
          label: 'label',
          value: 'value',
        },
        column: [
          {
            label: '姓名',
            prop: 'name',
            search: true,
            width: 162,
            dicData: LEAVE_DETAILS,
          }, {
            label: '学号',
            prop: 'number',
            search: true,
            dicData: LEAVE_DETAILS,
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',
            dicData: LEAVE_SEX,
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '校区',
            prop: 'campusDeptArea',
            dicData: PASS_DETAILS,
            editDisplay: false,
          },{
            label: '年级',
            prop: 'gradeName',
            search: false,
            type: 'select',
            dicData: LEAVE_DETAILS,
          },
          {
            label: '年级',
            prop: 'gradeId',
            search: true,
            type: 'select',
            hide: true,
            defaultExpandAll: true,
            dicUrl: '/admin/dept/PermissionTree',
            cascaderItem: ['deptName'],
            dicFormatter: (res) => {
              let gradeArr = res.data
              let value = []
              if(gradeArr.length> 0){
                for(let i of gradeArr){
                  if(i.typeNum == "2" && i.isLock === false){
                    value.push(i)
                  }
                }
                console.log(value)
                return value
              }
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.gradeId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '班级',
            prop: 'className',
            search: false,
            type: 'select',
            dicData: LEAVE_DETAILS,
          },
          {
            label: '班级',
            prop: 'deptName',
            search: true,
            filter: false,
            type: 'select',
            hide: true,
            defaultExpandAll: true,
            dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
            dicFormatter: (res) => {
              return res.data[0].children;//返回字典的层级结构
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'deptId',
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '学生属性',
            prop: 'identity',
            search: true,
            type: 'select',
            dicUrl: '/campus/identity/selectAll?groupNum=2',
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'name'
            },
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.identity = value.value
              this.getList(this.page, this.searchForm)
            },
          },{
            label: '楼栋',
            prop: 'buildingName',
            search: true,
            type: 'select',
            slot:true,
            dicUrl: '/campus/building/selectAll',
            dicMethod: 'get',
            props: {
              label: 'buildingName',
              value: 'buildingName'
            },
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.buildingName = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '宿舍号',
            prop: 'dormNumber',
            dicData: LEAVE_DETAILS,
            search: true,
            type: 'input',
          },
          {
            label: '请假发起人',
            prop: 'createUser',
            viewDisplay: true,
            width:106,
            search: false,
            dicData: LEAVE_DETAILS,
          },{
            label: '发起人电话',
            prop: 'linkPhone',
            viewDisplay: true,
            search: false,
            hide: true,
            dicData: LEAVE_DETAILS,
          },{
            label: '发起时间',
            prop: 'createTime',
            type: 'datetime',
            width: 120,
            sortable:true,
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            viewDisplay: true,
            search: false,
            dicData: LEAVE_DETAILS,
          }, {
            label: '请假类型',
            prop: 'leaveType',
            viewDisplay: true,
            search: true,
            type: 'select',
            filterable: true,
            dicData: LEAVE_TYPE,
            slot: true,
            change: (value) => {
              if (value.value === '') {
                return;
              }
              this.searchForm.leaveType = value.value
              this.getList(this.page, this.searchForm)
            },
          },{
            label: '请假开始时间',
            prop: 'startTime',
            type: 'datetime',
            width: 120,
            sortable:true,
            format: 'yyyy-MM-dd HH:mm',  //显示值时间格式
            valueFormat: 'yyyy-MM-dd HH:mm:ss',  //真实值的时间格式
            viewDisplay: true,
            search: false,
            dicData: LEAVE_DETAILS,
          },{
            label: '请假结束时间',
            prop: 'endTime',
            type: 'datetime',
            width: 120,
            sortable:true,
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            viewDisplay: true,
            search: false,
            dicData: LEAVE_DETAILS,
          },{
            label: '请假事由',
            prop: 'cause',
            viewDisplay: true,
            search: false,
            hide: true,
            dicData: LEAVE_DETAILS,
          }, {
            label: '审批状态',
            prop: 'leaveStatus',
            viewDisplay: true,
            slot:true,
            search: true,
            type: 'select',
            dicData: LEAVE_STATUS,
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.leaveStatus = value.value
              this.getList(this.page, this.searchForm)
            },
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  created() {
    let param = this.$route.query;
    //  请假状态的带参
    let columnleave = this.findObject(this.tableOption.column, "leaveType");

    if (param.leaveType !== undefined) {
      columnleave.searchValue = param.leaveType
    }
    //  审批状态的带参
    let columnstate = this.findObject(this.tableOption.column, "leaveStatus");

    if (param.leaveStatus !== undefined) {
      columnstate.searchValue = param.leaveStatus
    }
  },
  methods: {
    //自定义排序
    sortChange(params){
      this.sortParams = {};
      let arr = params.prop.split(/(?=[A-Z])/).join("_").toLowerCase();
      if (params.order === 'ascending'){
        this.sortParams.ascs = arr;
      }else if (params.order === 'descending'){
        this.sortParams.descs = arr;
      }
      this.getList(this.page,this.sortParams)
    },

    //显隐手机号
    showPhone() {
      let that = this;
      if (that.eye) {
        that.eye = false
      } else {
        that.eye = true
      }
    },

    //查看弹窗
    handle: function (row) {
      this.dialogEditVisible = true
      this.currentrow = row
      this.createUser = row.$createUser
      this.createTime = row.$createTime
      this.leaveType = row.$leaveType
      this.startTime = row.$startTime
      this.endTime = row.$endTime
      this.name = row.name
      this.sex = row.sex
      this.number = row.number
      this.gradeName = row.gradeName
      this.className = row.className
      this.linkPhone = row.linkPhone
      this.linkPhone1 = row.linkPhone1
      this.cause = row.cause
      this.identity = row.identity
      this.durationDay = row.durationDay
      this.durationHour = row.durationHour

      this.parentApprove = row.parentApprove
      this.parentApproveAdvice = row.parentApproveAdvice
      this.parentApproveTime = row.parentApproveTime

      this.teacherApprove = row.teacherApprove
      this.teacherApproveAdvice = row.teacherApproveAdvice
      this.teacherApproveTime = row.teacherApproveTime

      this.prefectApprove = row.prefectApprove
      this.prefectApproveAdvice = row.prefectApproveAdvice
      this.prefectApproveTime = row.prefectApproveTime

      this.leadersApprove = row.leadersApprove
      this.leadersApproveAdvice = row.leadersApproveAdvice
      this.leadersApproveTime = row.leadersApproveTime

      this.doctorApprove = row.doctorApprove
      this.doctorApproveAdvice = row.doctorApproveAdvice
      this.doctorApproveTime = row.doctorApproveTime
      this.leaveStatus = row.$leaveStatus
    },

    //关闭弹窗
    dictItemVisible: function () {
      this.dialogEditVisible = false
      this.eye = false
    },

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      let param = this.$route.query;
      if (param.flag === '1') {
        particularsObj(Object.assign({
          descs: 'create_time',
          current: page.currentPage,
          size: page.pageSize,
        }, params, param,this.sortParams)).then(response => {
          this.tableData = response.data.data.records
          for (var i = 0; i < response.data.data.records.length; i++) {
            let phone = response.data.data.records[i].linkPhone
            let newphone = phone.replace(/^(.{3})(?:\d+)(.{4})$/,"\$1****\$2"); //手机号打码正则
            response.data.data.records[i].linkPhone = newphone  //已打码
            response.data.data.records[i].linkPhone1 = phone    //未打码
          }
          this.page.total = response.data.data.total
          this.tableLoading = false
          param.flag = null
        })
      } else {
        particularsObj(Object.assign({
          descs: 'create_time',
          current: page.currentPage,
          size: page.pageSize,
        }, params, this.searchForm,this.sortParams)).then(response => {
          this.tableData = response.data.data.records
          for (var i = 0; i < response.data.data.records.length; i++) {
            let phone = response.data.data.records[i].linkPhone
            let newphone = phone.replace(/^(.{3})(?:\d+)(.{4})$/,"\$1****\$2");
            response.data.data.records[i].linkPhone = newphone
            response.data.data.records[i].linkPhone1 = phone
          }
          this.page.total = response.data.data.total
          this.tableLoading = false
          param.flag = null
        })
      }
    },

    //搜索页面内容
    searchChange(form, done) {
      if (form.deptName !== undefined) {
        form.deptId = form.deptName
        this.getList(this.page, form)
        done()
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}

</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}

/deep/ .el-form-item__label {
  text-align: left;
}

/deep/ .avue-form__row {
  padding-left: 2px !important;
  padding-right: 36px !important;
}

/deep/ .avue-form__menu--center {
  text-align: left;
}
</style>
